<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fluency Questionnaire Survey - Personalized Recommendation</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <style>
      /* ... existing code ... */
    </style>
  </head>
  <body class="px-4 py-6">
    <div class="fixed inset-x-0 top-0">
      <div class="progress-container">
        <div class="progress-bar" style="width: 100%"></div>
      </div>
    </div>

    <div class="container mx-auto max-w-md">
      <!-- 顶部导航 -->
      <div class="top-nav">
        <div class="back-btn" onclick="window.location.href='/vocabulary_result.html'">
          <i class="fas fa-arrow-left"></i>
        </div>
        <div class="step-indicator">步骤 8/8</div>
        <div style="width: 24px"></div>
        <!-- 占位，保持布局平衡 -->
      </div>

      <!-- ... existing code ... -->

      <!-- 底部按钮 -->
      <div class="mt-8">
        <button onclick="window.location.href='/index.html'" class="btn-primary">
          完成调查
          <i class="fas fa-check ml-2"></i>
        </button>
      </div>
    </div>

    <!-- ... existing code ... -->
  </body>
</html>
